<template>
  <div class="container">
    <headerNav title="福利详情" />
    <!-- Header section with statuss tag and title in one line -->
    <div class="header">
      <van-tag class="status-tag" plain type="primary" color="#f59e0b">{{ loadData.tag }}</van-tag>
      <div class="title">{{ loadData.title }}</div>
    </div>
    <!-- Validity period section -->
    <div class="validity">{{ loadData.validity }}</div>

    <!-- Content section with welfare description -->
    <div class="content">
      <p>{{ loadData.content }}</p>
    </div>

    <!-- Image section with gray block as placeholder -->
    <div class="image-container">
      <van-image class="img" radius="8px" cover :src="loadData.imageUrl" />
      <p class="caption">{{ loadData.caption }}</p>
    </div>

    <!-- Usage instructions section -->
    <div class="usage">
      <div class="usage-title">{{ loadData.usage?.title }}</div>
      <template v-for="(item, index) in loadData.usage?.list" :key="index">
        <p class="usage-content">{{ item.content }}</p>
      </template>
    </div>

    <!-- Claim button -->
    <a href="#" class="btn">领取</a>

  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import headerNav from '@/components/layout/headerNav.vue'
import { useRoute } from 'vue-router'
import { welfareDetail } from '@/config/welfareInfo'
const route = useRoute()
const loadData = ref({})
onMounted(() => {
  const id = Number(route.params.id)
  loadData.value = welfareDetail.find(item => item.id === id)
  // console.log(loadData.value)
})

</script>

<style>
.container {
  max-width: 680px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  margin-top: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status tag styling - outlined and smaller */
.status-tag {
  padding: 2px 5px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Title styling with ellipsis if overflow */
.title {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Validity period section */
.validity {
  font-size: 24px;
  color: #6b7280;
  margin-bottom: 10px;
}

/* Content section for welfare description */
.content {
  line-height: 1.8;
  font-size: 36px;
  color: #444;
  margin-top: 15px;
}

.content p {
  margin-bottom: 15px;
  font-size: 36px;
}

/* Usage instructions section */
.usage {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.usage-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #374151;
}

.usage-content {
  font-size: 28px;
  color: #444;
  margin-bottom: 10px;
}

/* Gray block as image placeholder */
.image-container {
  margin: 20px 0;
}

.image-container .gray-block {
  width: 100%;
  height: 300px;
  background-color: #e5e7eb;
  border-radius: 10px;
}

.image-container .img {
  width: 100%;
  height: 300px;
  border-radius: 10px;
}

.caption {
  font-size: 20px;
  color: #666;
  text-align: center;
  margin-top: 5px;
}

/* Button styling */
.btn {
  display: inline-block;
  width: 100%;
  margin-top: 20px;
  padding: 12px 0;
  background-color: #3b82f6;
  color: white;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
}
</style>